<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>故障风格图片</title>
    <style>
        .mix{
            width: 864px;
            height: 540px;
            background:url(../Resources/6.webp) #0ff;
            background-blend-mode: lighten;
            position: relative;
        }
        .mix::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background:url(../Resources/6.webp) #f00;
            background-blend-mode: lighten;
            mix-blend-mode: darken;
            margin-left: 10px ;
            animation: shake 30ms infinite;
        }
        @keyframes shake {
            50%{
                transform: translateX(1%);
            }
        }
    </style>
</head>

<body>
    <div class="mix"></div>
</body>

</html>